import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/*允许从一组选项中进行单一选择*/
class ChoiceChipDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ChoiceChipState();
}

class ChoiceChipState extends State<ChoiceChipDemo> {
  int _valueChoice = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ChoiceChip'),
        centerTitle: true,
      ),
      //Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列显示不完所有的widgets的时候，
      // 能够根据当前宽度或者高度自动换行。
      body: Wrap(
        //主轴间距
        spacing: 5,
        //副轴间距
        runSpacing: 8,
        children: List<Widget>.generate(10, (int index) {
          return _buildChoiceItem(index);
        }),
      ),
    );
  }

  Widget _buildChoiceItem(int index) {
    return ChoiceChip(
      label: Text('ChoiceChip$index'),
      labelStyle: TextStyle(color: Colors.black54),
      //选中的颜色
      selectedColor: Colors.orange,
      //未选中的颜色
      disabledColor: Colors.orange[100],
      onSelected: (bool select) {
        setState(() {
          _valueChoice = (select ? index : null)!;
        });
      },
      selected: _valueChoice==index,
    );
  }
}
